<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <link rel="stylesheet" href="./../css/style.css">
</head>
<body>
<div class="note">
  window.requestAnimationFrame(callback) <br>
  本身返回一个id (handle:number)
</div>
<div class="noteTwo">
  <h2 class="highContent">参数</h2>
  <p>
    <code>
      <b>callback</b>
    </code>
    一个指定函数的参数，该函数在下次重新绘制动画时调用。这个回调函数只有一个传参，DOMHighResTimeStamp，指示requestAnimationFrame() 开始触发回调函数的当前时间（performance.now()
    返回的时间）。
  </p>
  <hr>
  <h2 class="highContent">返回值</h2>
  <p>
    一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。
  </p>
</div>
<div class="note">
  看起来，点击停止时会有多进行一次调用
  <button id="btn">点之前看控制台</button>
</div>
<div id="animateEl" style="width: 100px;height: 100px;border: 1px solid #000;">

</div>
</body>
</html>

<script src="./../js/CanvasCtx.js"></script>
<script>
  let start = null;
  let element = document.getElementById('animateEl');
  element.style.position = 'absolute';

  let requestId = null;

  function step(timestamp) {
    // console.log(timestamp)
    if (!start) start = timestamp;
    let progress = timestamp - start;
    // element.style.left = Math.min(progress / 10, 200) + 'px';
    element.style.left = progress / 10 + 'px';
    // let d = window.requestAnimationFrame(step);
    // console.log(d);
    requestId = window.requestAnimationFrame(step);

    if (requestId > 100) {
      window.cancelAnimationFrame(requestId);
      console.log(requestId)
    }

    if (progress < 2000) {
      // let d = window.requestAnimationFrame(step);
      // console.log(d);
      // window.cancelAnimationFrame()
    }
  }


  // step(Date.now())
  window.requestAnimationFrame(step);

  // console.log(performance)
</script>


<script>
  // let flag = true;
  let btn = select('#btn');

  class TT {
    constructor() {
      let me = this;
      me._flag = true;
      me._countId = 0;

    }

    set on(handle) {
      let me = this;
      me._handle = handle;
    }

    step(t) {
      let me = this;
      me._handle.call(this);
      if (me._flag) {
        requestAnimationFrame(me.step.bind(this));
      }
      // console.log('inner--------------------------', t);
    }

    start() {
      let me = this;
      requestAnimationFrame(me.step.bind(this));
    }

    stop() {
      this._flag = false;
      console.log('------------')
    }
  }

  let i = 0;

  let tt = new TT();
  tt.on = function () {
    console.log(i);
    i++;
  };

  tt.start();

  btn.onclick = function () {
    tt.stop()
  };
</script>
